<template>
    <div class="navigation">
        <div class="row">
            <div class="col nav">
                <ul>
                    <li><router-link to="/">首页</router-link></li>
                    <li><router-link to="/Info">编辑资料</router-link></li>
                    <li v-if="stores.login" @click="exitLogin"><a href="#">退出登录</a></li>
                    <li v-else><router-link to="/Log">登录</router-link></li>
                    <li><router-link to="/Account">账户管理</router-link></li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
//导入pinia的store
import { useMainStore } from '@/stores/piniaStore/index'
const stores = useMainStore()
import { ref } from 'vue'
stores.login = localStorage.getItem('login') === 'true'
function exitLogin() {
    localStorage.setItem('login', String(false))
    stores.login = localStorage.getItem('login') === 'true'
}


</script>

<style lang='scss' scoped>
.navigation {
    background: #96b97d;
    width: 100%;
    height: 40px;
    margin-top: 30px;

    .nav {
        padding: 5px 0 0 20px;
        height: 38px;
        font-size: 1.2em;

        ul {
            list-style: none;

            li {
                display: inline;
                margin: 0 20px 0 0;

                a {
                    text-decoration: none;
                    color: white;
                }
            }
        }
    }
}
</style>